<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <jsp:include page="/static/commonviews/header.jsp"/>
    <link rel="stylesheet" href="bootstrap3-editable/css/bootstrap-editable.css"/>

    <style type="text/css">
        .disabled{
            pointer-events:none;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <br/>
    <div id="toolbar">
        <div class="form-inline" role="form">
            <div class="form-group">
                <span>Offset: </span>
                <input name="offset" class="form-control w70" type="number" value="0">
            </div>
            <div class="form-group">
                <span>Limit: </span>
                <input name="limit" class="form-control w70" type="number" value="5">
            </div>
            <div class="form-group">
                <input id="txtFind" name="search" class="form-control" type="text" placeholder="搜索">
            </div>
            <button id="btnFind" type="submit" class="btn btn-default">查询</button>
        </div>
    </div>
    <table id="table"></table>
    <div class="row">
        <button id="btnValue" class="btn btn-primary">获得修改后的值</button>
    </div>
</div>

<ul id="context-menu" class="dropdown-menu">
    <li class="disabled" data-item="add"><a>新增</a></li>
    <li data-item="edit"><a>修改</a></li>
    <li data-item="delete"><a>删除</a></li>
    <li data-item="copy"><a>拷贝</a></li>
</ul>


<jsp:include page="/static/commonviews/footer.jsp"/>
<script type="text/javascript" src="bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript" src="bootstrap3-editable/bootstrap-table-editable.js"></script>
<script type="text/javascript" src="bootstrap3-editable/bootstrap-table-contextmenu.min.js"></script>
<script type="text/javascript">
    $(function () {
        //搜索点击
        $("#btnFind").click(function () {
            $('#table').bootstrapTable('refresh');
        });
        //禁用事件
        $(".disabled").click(function (event) {
            event.preventDefault();
        });

        //表格初始化
        $('#table').bootstrapTable({
            url: "data/tree.json",
            search:true,
            searchAlign:"left",
            searchText:'',
            toolbar:'#toolbar',
            onClickRow: function(row, $el){
                $('#table').find('.success').removeClass('success');
                $el.addClass('success');
            },
            contextMenu:"#context-menu",
            contextMenuAutoClickRow:true,
            columns:[
                {field: 'Id',title: 'Id',halign:"center"}
                ,{field: 'Name',title: '部门名称',halign:"center",editable: {type:'text',title:"部门名称",mode:"inline"}}
                ,{field: 'Url',title: 'Url',halign:"center",
                editable:{type:"select",title:"部门",mode:"inline"
                    ,source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
                    }}
                ,{field: 'ParentId',title: 'ParentId',halign:"center",
                 editable:{type:"text",title:"Parent",mode:"inline",validate:function (v) {
                     if (isNaN(v))
                         return '字段必须是数字';
                     var age = parseInt(v);
                     if (age <= 0)
                         return '字段必须是正整数';
                 }}}
                ,{field: 'birday',align:'center',halign:"center",title: 'birday'
                    ,editable:{type:"date",format:'yyyy-mm-dd',title:"birday",mode:"inline"}
                }
                ,{field: 'CreateTime',title: 'CreateTime',halign:"center"
                    ,editable:{type:"textarea",title:"CreateTime"}}
                ,{field:'love',title:'爱好',halign:"center",
                    editable:{type:'checklist',title:'爱好',source:[{value:"1",text:"运动"},{value:"2",text:"音乐"}]}}
            ]
            , onContextMenuItem: function(row, da){
                //此次兼容IE8
                if(da[0].className=="disabled"){
                    return;
                }
                if(da.data("item") == "edit"){
                    alert("Edit: " + row.Id + ' ' + row.Name );
                } else if(da.data("item") == "delete"){
                    alert("Delete: " + row.Id + ' ' + row.Name);
                } else if(da.data("item") == "add"){
                    alert("add: " +  row.Id + ' ' + row.Name);
                }else if(da.data("item") == "copy"){
                   // alert("add: " +  row.Id + ' ' + row.Name);
                    if (window.clipboardData) {
                        window.clipboardData.clearData();
                        window.clipboardData.setData("Text", row.Name);
                        alert('恭喜，复制成功！');
                    }

                }
            }
        });

        $("#btnValue").click(function () {
            var p=$('#table').bootstrapTable('getData');
            alert(JSON.stringify(p));
        });
    });
</script>
</body>
</html>